<template>
  <div class="device-manage-container">
    <!-- 顶部导航 -->
    <div class="app-header">
      <h1 class="app-title">登录设备管理</h1>
      <button class="refresh-btn" @click="fetchDevices">
        <span class="refresh-icon">🔄</span>
        查询
      </button>
    </div>

    <!-- 设备列表 -->
    <div class="devices-section">
      <div v-if="loading" class="loading-state">
        <div class="loading-spinner"></div>
        <p class="loading-text">加载中...</p>
      </div>

      <div v-else-if="devices.length === 0" class="empty-state">
        <div class="empty-icon">📱</div>
        <p class="empty-text">暂无登录设备</p>
      </div>

      <div v-else class="devices-list">
        <div 
          v-for="device in devices" 
          :key="device.id" 
          class="device-card"
        >
          <div class="device-header">
            <div class="device-avatar">
              {{ getDeviceIcon(device.设备类型) }}
            </div>
            <div class="device-basic-info">
              <h3 class="username">{{ device.username }}</h3>
              <p class="device-type">{{ device.设备类型 }} · {{ device.设备品牌 }}</p>
            </div>
            <button 
              class="kick-btn" 
              @click="handleKickDevice(device)"
              :disabled="kickingDevice === device.id"
            >
              <span v-if="kickingDevice === device.id" class="kick-loading"></span>
              <span v-else>踢下线</span>
            </button>
          </div>

          <div class="device-details">
            <div class="detail-item">
              <span class="detail-label">IP地址:</span>
              <span class="detail-value">{{ device.ip }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">浏览器:</span>
              <span class="detail-value">{{ device.浏览器 }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">操作系统:</span>
              <span class="detail-value">{{ device.操作系统 }}</span>
            </div>
          </div>

          <div class="device-status">
            <span class="status-indicator"></span>
            <span class="status-text">在线</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 踢下线确认弹窗 -->
    <div v-if="showKickConfirm" class="modal-overlay" @click="showKickConfirm = false">
      <div class="modal-content confirm-modal" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">强制下线</h3>
        </div>
        <div class="modal-body">
          <div class="confirm-icon">⚠️</div>
          <p class="confirm-text">确定要将用户 "{{ selectedDevice?.username }}" 踢下线吗？</p>
          <div class="device-preview">
            <span class="preview-icon">{{ getDeviceIcon(selectedDevice?.设备类型) }}</span>
            <div class="preview-info">
              <span class="preview-username">{{ selectedDevice?.username }}</span>
              <span class="preview-details">{{ selectedDevice?.设备类型 }} · {{ selectedDevice?.设备品牌 }}</span>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn cancel-btn" @click="showKickConfirm = false">取消</button>
          <button class="btn confirm-kick-btn" @click="confirmKickDevice">确认踢出</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { apiService } from '../utils/http'
import { tools } from '../utils/tools'

export default {
  name: 'CurrentLoginDev',
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    const devices = ref([])
    const loading = ref(false)
    const showKickConfirm = ref(false)
    const selectedDevice = ref(null)
    const kickingDevice = ref(null)

    // 获取设备图标
    const getDeviceIcon = (deviceType) => {
      const icons = {
        '手机': '📱',
        '平板': '📟',
        '电脑': '💻',
        '电视': '📺'
      }
      return icons[deviceType] || '🖥️'
    }

    // 获取设备列表
    const fetchDevices = async () => {
      loading.value = true
      try {
        const headers = { token: `${tools.getTokenFromCookie()}` }
        const { res, isAuthenticated } = await tools.authApiCall(
          () => apiService.post('/CurrentLoginQuery', {username: ''}, { headers }),
          router,
          route
        )
        
        if (res.data.status && res.data.data) {
          devices.value = res.data.data
        } else {
          devices.value = []
        }
      } catch (error) {
        console.error('获取设备列表失败:', error)
        devices.value = []
      } finally {
        loading.value = false
      }
    }

    // 踢下线操作
    const handleKickDevice = (device) => {
      selectedDevice.value = device
      showKickConfirm.value = true
    }

    const confirmKickDevice = async () => {
      if (!selectedDevice.value) return
      
      kickingDevice.value = selectedDevice.value.id
      try {
        const headers = { token: `${tools.getTokenFromCookie()}` }
        await tools.authApiCall(
          () => apiService.post('/ForceLogout', { 
            username: selectedDevice.value.id 
          }, { headers }),
          router,
          route
        )
        
        // 从列表中移除被踢出的设备
        devices.value = devices.value.filter(
          device => device.id !== selectedDevice.value.id
        )
        
        showKickConfirm.value = false
        selectedDevice.value = null
        alert('设备已强制下线')
      } catch (error) {
        console.error('踢下线失败:', error)
        alert('踢下线失败')
      } finally {
        kickingDevice.value = null
      }
    }

    onMounted(() => {
      fetchDevices()
    })

    return {
      devices,
      loading,
      showKickConfirm,
      selectedDevice,
      kickingDevice,
      getDeviceIcon,
      fetchDevices,
      handleKickDevice,
      confirmKickDevice
    }
  }
}
</script>

<style scoped>
.device-manage-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  padding: 16px;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
}

.app-title {
  color: #f57c00;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(245, 124, 0, 0.1);
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.refresh-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.refresh-btn:active {
  transform: translateY(0);
}

.refresh-icon {
  font-size: 16px;
}

/* 加载状态 */
.loading-state {
  text-align: center;
  padding: 60px 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #ffb74d;
  border-top: 3px solid #f57c00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #f57c00;
  font-size: 16px;
  margin: 0;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #ff9800;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.empty-text {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}

/* 设备列表 */
.devices-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.device-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(255, 152, 0, 0.15);
  border: 1px solid rgba(255, 167, 38, 0.2);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.device-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255, 152, 0, 0.2);
}

.device-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.device-avatar {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.device-basic-info {
  flex: 1;
}

.username {
  color: #333;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.device-type {
  color: #666;
  font-size: 13px;
  margin: 0;
}

.kick-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 60px;
  height: 32px;
}

.kick-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.4);
}

.kick-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.kick-loading {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

.device-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label {
  color: #666;
  font-size: 12px;
  font-weight: 500;
  min-width: 60px;
}

.detail-value {
  color: #333;
  font-size: 13px;
  flex: 1;
  word-break: break-all;
}

.device-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.status-text {
  color: #4caf50;
  font-size: 12px;
  font-weight: 500;
}

/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.confirm-modal {
  max-width: 340px;
}

.modal-header {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  padding: 20px;
  text-align: center;
}

.modal-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.modal-body {
  padding: 24px;
}

.confirm-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}

.confirm-text {
  text-align: center;
  color: #333;
  font-size: 16px;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.device-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff8e1;
  border-radius: 12px;
  border: 1px solid #ffe0b2;
}

.preview-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-username {
  color: #333;
  font-size: 14px;
  font-weight: 600;
}

.preview-details {
  color: #666;
  font-size: 12px;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 0 24px 24px 24px;
}

.btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:hover {
  background: #eeeeee;
}

.confirm-kick-btn {
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: white;
}

.confirm-kick-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 87, 34, 0.4);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .device-manage-container {
    padding: 12px;
  }
  
  .app-header {
    margin-bottom: 20px;
  }
  
  .app-title {
    font-size: 20px;
  }
  
  .refresh-btn {
    padding: 8px 14px;
    font-size: 13px;
  }
  
  .device-card {
    padding: 16px;
    border-radius: 16px;
  }
  
  .device-avatar {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  
  .username {
    font-size: 16px;
  }
  
  .kick-btn {
    padding: 6px 12px;
    font-size: 11px;
    min-width: 55px;
    height: 28px;
  }
  
  .modal-overlay {
    padding: 16px;
  }
  
  .modal-content {
    border-radius: 16px;
  }
  
  .modal-header {
    padding: 18px;
  }
  
  .modal-body {
    padding: 20px;
  }
  
  .modal-footer {
    padding: 0 20px 20px 20px;
  }
  
  .btn {
    padding: 12px 16px;
    font-size: 13px;
  }
}
</style>
